<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>12</div>
    <div>123</div>
    <div>1234</div>
    <script>
        let test =666;
        // 匿名函数自调用
        // 第一个形参解决作用域查找问题，压缩体积
        // 第二个形参避免ie678出现undefined
    ;(function (window, undefined){
        function init(el){
        // 获取所有数据
        // 遍历数据  将js dom绑定到jq身上 
            let els = document.querySelectorAll(el)
        for(let i=0;i<els.length;i++){
        // i 索引
        // els[i] 获取js标签对象
            this[i]= els[i]
        }
        this.length = els.length
        }
        let jQuery = function(el){
               return  new init(el)
        
    }
    // 给jq增加一个快捷操作，也就是静态方法 该静态方法可以给init添加原型方法
    jQuery.extend = function(object){
        // object = {方法名（）{}，…}
        for(let key in object){   //key就是方法名
            init.prototype[key] = object[key]
        }
    }

    //    原型方法的添加
    init.prototype={
        css(cssAttr, cssVal){
            // console.log(this);
            // console.log(this[0]);
            // this[0].style.cssAttr = cssVal
            for(let i=0;i<this.length;i++){
                this[i].style[cssAttr] = cssVal  //当对象的键是变量时 用数组语法
            }
            return this
        }
    }
    window.JQuery = window.$ = jQuery
    })(window)

        let jqObj= new $('div')
        $.extend({
        bg(){}
    })
        console.log(jqObj);

        jqObj.css('color','#fff').css('background','#000')
    </script>
</body>
</html>